<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8">
     
    <style>
        canvas{
            transform: rotate(180deg);
        }
    </style>
    <title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<canvas id="myCanvas" width="13" height="13">

</canvas>
<script>
    const c = document.getElementById("myCanvas");
    const ctx = c.getContext("2d");
    // Create gradient
    function aa(vala, valb, valc) {
        ctx.fillStyle = "red"
        ctx.fillRect(0, 0, 2.5, vala);
        ctx.fillRect(5, 0, 2.5, valb);
        ctx.fillRect(10, 0, 2.5, valc);
    }
    const a_1 = {
        height: 8,
        num: 1
    };
    const b_1 = {
        height: 13,
        num: 1
    }
    const c_1 = {
        height: 3,
        num: 1
    };
    function sumNum(val) {
        if (val.num % 2 === 1) {
            if (val.height >= 13) {
                val.num++
            }
            val.height++;
        } else {
            if (val.height <= 3) {
                val.num++
            }
            val.height--;
        }
        return val
    }
    setInterval(() => {
        ctx.clearRect(0, 0, 13, 13);
        aa(sumNum(a_1).height, sumNum(b_1).height, sumNum(c_1).height)
    }, 40)
</script>

</body>
</html>